<!--
 * @Author       : tingke
 * @Date         : 2021-03-01 09:22:31
 * @LastEditors  : tingke
 * @LastEditTime : 2021-03-01 09:40:28
 * @FilePath     : /React/jsx.html
 * @Description  :
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- react.min.js - React 的核心库 -->
    <script src="./react/react.development.js"></script>
    <!-- react-dom.min.js - 提供与 DOM 相关的功能 -->
    <script src="./react/react-dom.development.js"></script>
    <!-- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。 -->
    <!-- 生产环境中不建议使用 -->
    <script src="./react/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
    /**
     * React 使用 JSX 来替代常规的 JavaScript，它是一种 JavaScript 的语法扩展
     *
     * JSX的优点：
     * 1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
     * 2. 它是类型安全的，在编译过程中就能发现错误。
     * 3. 使用 JSX 编写模板更加简单快速。
     * */

    //  JSX 看起来类似 HTML ，我们可以看下实例:
    //  自定义属性需要使用 data- 前缀
    //  在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
    //  在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代
    //  注释需要写在花括号中
    //  JSX 允许在模板中插入数组，数组会自动展开所有成员

        const myStyle = {
            fontSize: 100,
            color: '#FF0000'
        }
        const i = 1;
        const arr = [
            <h1 key="h1">菜鸟教程</h1>,
            <h2 key="h2">学的不仅是技术，更是梦想！</h2>,
        ];
        ReactDOM.render(
            <div>
                <h1 style={myStyle}>Hello, React!</h1>
                <h2 data-myattrib="tingke">Hello, React!</h2>
                <h3>Hello, {1+9}!</h3>
                <h4>Hello, { i === 1?'tingke': 'react' }!</h4>
                {/** 这是注释 */}
                <div>{arr}</div>
            </div>,
            document.getElementById('example')
        );
    </script>
</body>
</html>
